<script setup lang="ts">
const form = reactive({})
const mainParams = reactive({
	dialogVisible: false,
	dialogViewConfig: {
		title: '',
		width: 600,
		content: {}
	},
})
const openDialogViewFn = dialogViewConfig => {
    mainParams.dialogVisible = true
	mainParams.dialogViewConfig = dialogViewConfig

	form.instance_id = mainParams.dialogViewConfig?.content?.instance_id,
	form.key = mainParams.dialogViewConfig?.content?.key,
	form.value = mainParams.dialogViewConfig?.content?.value
}

// 暴露给父组件
defineExpose({
    openDialogViewFn
})

const handlerCloseFn = () => mainParams.dialogVisible = false
</script>

<template>
	<el-dialog
		v-model="mainParams.dialogVisible"
		:title="mainParams?.dialogViewConfig?.title"
		:width="mainParams?.dialogViewConfig?.width"
		:before-close="handlerCloseFn"
		destroy-on-close
		draggable
	>
		<div>
			<el-form 
				:model="form" 
				label-width="80px"
			>
				<el-form-item v-if="mainParams.dialogViewConfig?.isGray" label="实例ID:" class="mb-20">
					<el-input
						v-model="form.instance_id" 
						readonly 
					/>
				</el-form-item>
		
				<el-form-item label="Key:" class="mb-20">
					<el-input
						v-model="form.key" 
						readonly 
					/>
				</el-form-item>
		
				<el-form-item label="Value:" class="mb-0">
					<el-input
						v-model="form.value" 
						type="textarea" 
						readonly 
					/>
				</el-form-item>
			</el-form>
		</div>
	</el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-form) {
	label.el-form-item__label {
		display: inline-block;
		text-indent: 0;
		text-align: right;
	}

	textarea {
		margin-bottom: .1rem;
		height: 2rem;
	}
}
</style>